<style scoped="" lang="scss">

  $height:80px;

  $bg:#f1f1f1;

  .banner{
    width:100%;
    height:$height;
    line-height: $height;
    display: block;
    clear: both;
    float: left;
    background:$bg;
    position: relative;
    box-sizing: border-box;
    padding-left: 30px;
    color: #5a5a5a;
    font-family: '微软雅黑';
    font-size: 20px;
    .box-shadow{
      width:100%;
      height: 6px;
      display: block;
      position: absolute;
      left:0;
      bottom:-6px;
      background: url('../../../../assets/images/shadow.png') repeat;
      opacity: 0.6;
    }

    .corporation{
      margin-left: 15px;
     }

     .position{
       margin-left: 10px;
     }

     .name{
       margin-left: 5px;
     }

   }

</style>

<template>
  <div class="banner">
    <span class="box-shadow"></span>
    <span class="welcome">您好!</span>
    <span class="corporation">{{corporation}}</span>
    <span class="position" v-if="getPosition">{{position}}</span>
    <span class="name">{{name}}</span>
  </div>
</template>

<script>
  export default {
      name:"Banner",
      props:{
        position:{
          type:String,
          required:false,
          default:''
        },
        corporation:{
          type:String,
          required:true
        },
        name:{
          type:String,
          required:true
        }
      },
      computed:{
        getPosition(){
          return this.$trim(this.position)!=='';
        }
      }
  }

</script>
